react native踩坑记录
一 、安装1、Python2 和Java SE Development Kit (JDK)可以直接通过腾讯电脑关键安装， Android SDK安装的时候路径里不能有中文和空格2、配置java环境变量3、 adb devices 为空，没有检测到设备4、Invalid escape sequence at line 1 column 29 path $[0].name 在gradle.properties中添加org.gradle.jvmargs=-Dfile.encoding=UTF-8，最主要是解决...
2024-01-10
react native 实现拖拽排序
先上效果图，意思意思。其实原理很简单，没有想的那么难。大家在改造的时候，请注意 this.offset 的值，因为它关系到查找目标box的index（原理：手势释放时，所在的坐标值来推算出目标box的Index），本文代码可读性还...
2024-01-10
react native之组织组件
这些组件包括<TabView>,<NavigatorView>和<ListView>,他们实现了手机端最常用的交互和导航。你会发现这些组件在实际的项目中会非常有用。原生的<Listview>组件使用起来会很平滑和顺畅，如果你想在ListView里渲染大量的数据，你必须让视图足够简单，这样才能减少卡顿、React Native的<ListView>组件需要两个属性：...
2024-01-10
react-native 之布局篇
一.宽度单位和像素密度 react的宽度不支持百分比,设置宽度时不需要带单位,那么默认的单位是什么呢? 1 /** 2 * Sample React Native App 3 * https://github.com/facebook/react-native 4 */ 5 'use strict'; 6 import React, { 7 AppRegistry, 8 Component, 9 StyleSheet,10 Text,11 View,12 Dimensi...
2024-01-10
react native实现登录页面
react native实现登录页面这是最终的效果图 { super(props); this.afterEnd = this._afterEnd; this.navigation = props.navigation; this.state = { username: '', passwo...
2024-01-10
初学：react-native 轮播图
参考资料：http://reactscript.com/react-native-card-carousel-component/import React, {Component} from 'react';import { StyleSheet, Text, Image, View} from 'react-native';import CarouselCard from '../carouselCard/Card';import Carousel, {Pagination} fr...
2024-01-10
搭建react native所遇到的坑
一、所遇问题在搭建react native环境中,遇到执行react native run-android命令出现如下问题1 Could not resolve all dependencies for configuration ':classpath'.2 > Could not resolve com.github.dcendents:android-maven-gradle-plugin:3.1.43 Required by:4 project :5 ...
2024-01-10
react-native 构建工程注意点
react-native更新到0.57版本之后，新建工程总会出现无法安装js文件问题。具体表现是根据网上的搜索，可以使用如下步骤解决：react-native init projectcd projectnpm add @babel/runtimenpm installmkdir -p android/app/src/main/assetsreact-native run-android步骤3，4很重要从github上下载的代码版本不一致参考链接https://github.co...
2024-01-10
react-native 屏幕尺寸和文字大小适配
现在的手机品牌和型号越来越多，导致我们平时写布局的时候会在个不同的移动设备上显示的效果不同，比如我们的设计稿一个View的大小是300px，如果直接写300px，可能在当前设备显示正常，但到了其他设备可能就会偏小或者偏大，这就需要我们对屏幕进行适配。安卓原生的话有自己的适配规则，可...
2024-01-10
react-native App的原理介绍
react-native App中，大体可以理解为：整个APP作为容器,里面存放有多个父组件,子组件,孙子组件,各个组件都含有state和props这两个最重要的属性.如下图所示：React 有props和state，props意味着父级分发下来的属性，state意味着组件内部可以自行管理的状态，并且整个React没有数据向上回溯的能力，也就是说数...
2024-01-10
react-native 初步接触要点总结
写在前面的话，要用好react-native，必须要先了解es6 和 jsx，之后再开始react-native之旅目前用react-native已经有一个星期了，记录其中一些要点1、props是只读的，唯一的修改时机为父渲染的时候，将新的props传递给子2、定义自己的props的时候使用defaultProps才能指定默认值3、定义自己的props的时候最好使用...
2024-01-10
react-native-svg的使用
今天学习一下react-native-svg,一如既往,在安装该库的时候,就有一大堆坑等你填.首先,我新建一个rn项目,按照官方说明先导入库npm install react-native-svg --save再链接库文件 rnpm link react-native-svg然后运行,成功报错:然后我换个姿势入水,我重新新建一个项目,先打开运行起来,再导入三方库和链接link.然后写一...
2024-01-10
react-native-开发环境搭建
一、开发环境搭建-windows平台；安装 node；安装JDK； react native npm install -g react-native-cli安装Android开发工具AndroidStudio https://developers.google.cn创建一个react native的应用 react-native init FirstApp项目运行 react-native run-ios 或 react-native run-android...
2024-01-10
react-native真机调试注意事项
1、我使用的手机是:红米note，小米4真机调试，在真机调试的过程中遇到的常见问题是：项目已安装到了手机上但是打开该项目发现是白屏,那么现在做的就是，（1）打开手机的安全中心，（2）找见应用权限管理，（3）找到你的应用程序，将是否显示悬浮窗置为允许。当这些设置完成后再打开该应用程...
2024-01-10
vim开发react native 有断点调试插件吗？
vim开发react native 有断点调试插件吗，可以直接在vim打开的文件上打断点，并在vim窗口下方显示输出信息。类似这种：...
2024-01-10
自学React-native （第二天）-- 布局
自学React-native （第二天）-- 布局1.前言：RN中布局使用的是flex(弹性布局方式)。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地...
2024-01-10
react-native移动应用开发环境问题
react-native 最新环境搭建版本问题 报错如下各种环境都搭建了，但是还是报错。环境问题报错信息如下如何解决我安装的node版本为12.13的最新版本，我重新安装了一个node10.16.3的旧版本，然后重新启动项目，就解决了。java环境坑点我的java环境原来是java13版本，也就是目前java的最新版本，编译时...
2024-01-10
react-native 0.40.0 环境搭建踩坑全记录
初学react-native，找了一个课程，使用0.40版本，而现在默认自动安装最新版本0.55，这给我添了不少麻烦，环境配置上也踩了好多坑，好不容易跑通，必须总结一下1. 安装JDK 1.8（暂不支持更高版本），配置环境变量win10系统，点击开始在菜单，直接打字：环境变量点击新建JAVA_HOME : C:\Java\jdk1.8.0_171...
2024-01-10
React+antd 实现文本滚动
有一个很长的文本，想要实现上下自动滚动，就是进入页面，不需要任何操作，文本自动从开头滚动回答之前有个 marquee 标签不过废弃了，这个要自己封装吧，可以搜一下别人的实现。基本思路应该就是：利用定时器，固定时间内修改偏移量；长文本可以考虑虚拟滚动，或者裁剪数组。...
2024-01-10
react添加/嵌入 iframe
react 嵌入 iframe 主要是为了隔离富文本，避免跟宿主环境的样式、变量等造成污染。情况1：后端返回一个完整的网页，前端直接 `<iframe src="$url"></iframe>` 就可以了。情况2：后端返回内容不可控 (比如以下例子)。用法：index.tsx:export default function Iframe () { const contentIFrameRef = useRef<HTMLIFrameElement>(null)...
2024-01-10
react 中使用 import() 报错
使用npx create-react-app my-app创建的应用，添加了react-router-dom使用import()时，报错，如下，请问是怎么回事??应该怎么配置呢配置项目地址：https://zhonggu.coding.net/public/react-learn/react-learn/git/files回答既然你这个是学习的项目，不妨开源出来，方便大家帮你排查原因。原因找到了，是因为包react-scripts的版本...
2024-01-10
React-native中灵活运用虚拟对象传递参数
这里的需求是：我在当前页面可以动态添加多条记录； 解决方案：我的设计是：list窗口用于数据展示，展示自己添加过的东西，添加的时候用的是自定义模态窗口； 直接上代码： 这里是构造部分； 这个是数据展示部分和添加按钮 打开模态窗口添加数据在这里： 这个是添加数据的模态窗口 当点...
2024-01-10
webpack4.0 + react
webpack4.0 中删除了 module.loaders、NoErrorsPlugin、CommonsChunkPlugin、OccurenceOrderPlugin，将不再支持这也插件等； moudule.loader 在 webpack3.0 中进行文件的解析的时候我们的配置一般是：module: { rules: [ { test: /\.js|.jsx$/, loader: "babel-loader", query:{ presets:["es2015","re...
2024-01-10
react 仿 antd 风格的季度选择组件
产品也真是够了，周选择、月份选择、年份选择都是 antd 直接支持的，然而他现在要求要季度选择和半年份的选择。那就来实现一个仿 antd 风格的季度选择组件吧，本文部分参照博客园-真的想不出来-模仿 Antd 写一个季度的时间选择器 V1.0我实现了复制可用的版本。效果功能：一个纯组件，并且是 t...
2024-01-10
